<!doctype html>
<html ng-app="myapp">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="script-tags-for-development.js"></script>
    <link href="custom-marker.css"  rel="stylesheet" />
  </head>
  <body>
    <script>
      angular.module('myapp', ['ngMap']);
      angular.module('myapp').controller('MyCtrl', function(NgMap){
        var vm = this;
        NgMap.getMap().then(function(map) {
          vm.showCustomMarker= function(evt) {
            map.customMarkers.foo.setVisible(true);
            map.customMarkers.foo.setPosition(this.getPosition());
          };
          vm.closeCustomMarker= function(evt) {
            this.style.display = 'none';
          };
        });
      });
    </script>
    <div ng-controller="MyCtrl as vm">
      <ng-map zoom="13" center="1600 pennsylvania ave, washington DC" style="height:600px"
        on-center-changed="centerCustomMarker()">
        <marker position="10 pennsylvania ave, washington DC" on-click="vm.showCustomMarker()"></marker>
        <marker position="2600 pennsylvania ave, washington DC" on-click="vm.showCustomMarker()"></marker>
        <custom-marker id="foo" position="10 pennsylvania ave, washington DC" on-click="vm.closeCustomMarker()">
          <div>
            <img width="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Donald_Trump_August_19%2C_2015_%28cropped%29.jpg/220px-Donald_Trump_August_19%2C_2015_%28cropped%29.jpg" align="left" /> Hi, How Are You? <br/>
            My Name is Trump, and people call me as Mr. President.<br/>
            We live in this house.<br/>
            <br/>
            <img width="300" src="http://cdn.cstatic.net/images/gridfs/53b42fd3f92ea17d970280b4/Screen%20Shot%202014-07-02%20at%2012.07.54%20PM.png" />
            <br/>
            If you want to visit us, please click <a href="https://www.whitehouse.gov">here</a>
        </custom-marker>
      </ng-map>
    </div>
  </body>
</html>

